<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="Lsc">
    <script src="../jq/jquery-3.1.1.js"></script>
    <title>图片上传</title>
    <style>
      #chooseImg img{
        width: 100px;
        height: 100px;
        cursor: pointer;
      }
      #chooseImg input{
          display: none;
      }
    </style>
</head>
<body>
    <form>
        <div id="chooseImg">
            <img src="add.png" alt="">
            <input type="file">
            <img src="add.png" alt="">
            <input type="file">
            <img src="add.png" alt="">
            <input type="file">
        </div>
        <div>
            <button type="button">添加</button>
            <button type="button">上传</button>
        </div>
    </form>
</body>
</html>
<script>
        // 点击添加按钮，添加一对<img>和<input>
        $('button').eq(0).click(function(){
        $('#chooseImg').append('<img src="add.png" alt="">');
        $('#chooseImg').append('<input type="file">');
    });

    // 点击图片实现选择图片的图片
        $('#chooseImg').on('click','img',function(){
           $(this).next().click();
        });
    //    显示图片到页面上
        $('#chooseImg').on('change','input',function(){

            console.dir(this);
            // 取出上传的文件
            var file =this.files[0];
            // 如果是图片，显示在页面上
            if(file.type.startsWith('image')){
                $(this).prev().attr('src',URL.createObjectURL(file));
            }

        });
</script>